import {
  Input,
  Row,
  Col,
  Form,
  Button,
  Divider,
  Space,
  Select,
  Table,
} from "antd";
import type { FormProps } from "antd";
import "./index.scss";
type FieldType = {
  username?: string;
  phone?: string;
  status?: string;
};

export default function User() {
  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  const dataSource = [
    {
      key: "1",
      name: "胡彦斌",
      age: 32,
      address: "西湖区湖底公园1号",
    },
    {
      key: "2",
      name: "胡彦祖",
      age: 42,
      address: "西湖区湖底公园1号",
    },
  ];

  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "住址",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "操作",
      key: "action",
      fixed: "right",
      align: "center",
      width: 100,
      render: (_, record) => (
        <Space size="middle">
          <Button variant="text" color="primary">
            修改
          </Button>
          <Button type="text" danger>
            删除
          </Button>
        </Space>
      ),
    },
  ];
  return (
    <>
      <div className="container">
        <div className="search">
          <Form
            name="basic"
            wrapperCol={{ span: 22 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            layout="vertical"
          >
            <Row>
              <Col span={6}>
                <Form.Item<FieldType>
                  label="用户名称"
                  name="username"
                  rules={[
                    { required: true, message: "Please input your username!" },
                  ]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item<FieldType>
                  label="手机号码"
                  name="phone"
                  rules={[
                    { required: true, message: "Please input your password!" },
                  ]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item<FieldType> label="状态" name="status">
                  <Select allowClear>
                    <Select.Option value={0}>启用 </Select.Option>
                    <Select.Option value={1}> 禁用</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
        <Divider style={{ margin: "15px 0" }}></Divider>
        <div className="btns flex-between">
          <div className="btns-left">
            <Space size="small">
              <Button type="primary">新增</Button>
              <Button>修改</Button>
              <Button type="primary" danger>
                删除
              </Button>
              <Button>下载</Button>
            </Space>
          </div>
          <div className="btns-right">
            <Space size="small">
              <Button type="primary">搜索</Button>
              <Button>取消</Button>
            </Space>
          </div>
        </div>
        <div className="table-content">
          <Table dataSource={dataSource} columns={columns} />;
        </div>
      </div>
    </>
  );
}
